<template>
    <div style="height: 100%; position: relative">
        <el-drawer
			title="操作积分"
            :before-close="handleClose"
            :visible.sync="show_dialog"
            direction="rtl"
			size="60%"
            custom-class="demo-drawer"
            ref="drawer">
            <div class="demo-drawer__content">
                <el-form :model="form"  ref="form">
                    <el-form-item class="fuck"
                        :label-width="formLabelWidth"
                        :class="rules3 == 1 ? 'rules-member':''"
                        prop="operatetype">
                       <span class="start">*</span>
                       <span>增减类型：</span>
                        <el-select v-model="form.operatetype" placeholder="增减类型" style="width:100%;" @change="handleSelectChange">
                            <el-option
                                v-for="item in searkeyList"
                                :label="item.search_value"
                                :key="item.id" 
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <span :class="rules3==1?'rules-member1':'rules-span'">请选择增减类型</span>
                    </el-form-item>
                    <el-form-item class="fuck"
                        :label-width="formLabelWidth"
                        prop="store_name">
                       <span>店铺：</span>
                        <el-input
                            v-model="form.store_name"
                            autocomplete="off"
                            @blur="animateWidth()"
                        ></el-input>
                        <span class="icon-span">可不填</span>
                    </el-form-item>   
                    <el-form-item
                        :label-width="formLabelWidth"
                        :id="isdis==1?'radio-item':'radio-on'">
                        <el-radio-group v-model="form.store_name" style="margin-left:5px" :class="isdis==1?'':'radio-none'">
                            <el-radio v-for="item in storeList"
                                :label="item.store_name"
                                :value="item.store_id"
                                :key="item.store_id" 
                                @change="getRadioVal(item.store_name,item.store_id)"
                                >
                                </el-radio>
                        </el-radio-group>                     
                    </el-form-item>                                                                                                                
                    <el-form-item 
                        :label-width="formLabelWidth"
                        autosize
                        :class="rules1==1?'rules-member':'' "
                        prop="pointsnum">
                       <span class="start">*</span>
                       <span>元宝值：</span>
                        <el-input
                            v-model="form.pointsnum"
                            @change="handleCheckStatus"
                            autocomplete="off"
                        ></el-input>
                        <span :class="rules1==1?'rules-member1':'rules-span'">{{rules1_desc}}</span>
                    </el-form-item>  
                    <el-form-item 
                        :label-width="formLabelWidth"
                        :class="rules2==1?'rules-member':''"                        
                        prop="pointsdesc">
                        <span class="start">*</span>
                       <span>描述：</span>
                        <el-input type="textarea" v-model="form.pointsdesc"></el-input>
                        <span :class="rules2==1?'rules-member1':'rules-span'">请填写描述</span>
                    </el-form-item>                                   
                </el-form>
                <div class="demo-drawer__footer" style="margin:20px 0 0 80px;">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        @click="submitForm()"
                        :loading="loading"
                        >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                    >
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            isdis:0,
            form: {
                 operatetype:'',
                 store_name:'',
                 pointsnum:'',
                 pointsdesc:'',
                 store_id:'',
                 member_id:'',
            },
            member_points: 0,       // 当前元宝值
            searkeyList:[
                {id:'1','search_value':'增加'},
                {id:'2','search_value':'减少'},
                {id:'3','search_value':'减少（店铺操作）'},
                {id:'4','search_value':'减少（平台赠送）'}
            ],   
            rules1:0,
            rules1_desc: '请填写元宝值',
            rules2:0,    
            rules3:0,         
            storeList:[                             
            ],        
            // rules:{
            //    pointsdesc:[
            //        {required:true,message:'请填写描述',trigger:'blur'}
            //    ],
            //    pointsnum:[
            //        {required:true,message:'请输入元宝',trigger:'blur'}
            //    ],  
            // },
            radio:0,
            formLabelWidth: '80px',
			timer: null,
			show_dialog:false,
			type:'add'
        };
	},
	created(){
        // console.log('created',this);

    },
    destroyed(){
        this.rules1 = 0;
        this.rules2 = 0;        
    },
    methods: {
		show_dialog_fn(id, member_points) {
			if(id){
                this.form.member_id = id;
                this.member_points = member_points
			}
			this.show_dialog = true;
        },
        handleCheckStatus() {
            const { operatetype, pointsnum } = this.form
            if (+operatetype > 2 && +pointsnum > +this.member_points) {
                this.rules1 = 1
                this.rules1_desc = '用户积分不够, 无法减少处理'
                return false
            }
            return true
        },
        handleSelectChange(val) {
            if (+val > 2) {
                this.handleCheckStatus()
            }
        },
        getRadioVal(data,id){
            this.form.store_id = id;
            this.form.store_name = data;
        },
        submitForm(){
            this.rules1 = 0;
            this.rules1_desc = '请填写元宝值'
            this.rules2 = 0;    
            this.rules3 = 0;         
            var data = this.form; 
            if(!data.operatetype){
               this.rules3 = 1;
               return;
            }             
            if(!data.pointsnum){
               this.rules1 = 1;
               this.rules1_desc = '请填写元宝值'
               return;
            } else if (!this.handleCheckStatus()) {
                return
            }
            if(!data.pointsdesc){
               this.rules2 = 1;
               return;
            }    
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 400);                               
            this.$http.post('/admin/member/index.php?act=pointManage&op=add',data).then((res)=> {
                if (res.code == 1) {
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.show_dialog = false;
                    }, 1000);                         
                }else {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'error'
                    });                    
                }
            })         
        },
        animateWidth(){
            if(this.form.store_name){
                this.$http.post('/admin/member/index.php?act=pointManage&op=getStore',{name:this.form.store_name}).then((res)=> {
                    if (res.code == 1) {
                           this.isdis=1;
                           this.storeList = res.data;
                           
                    }else {
                        this.isdis=0;
                        alert(res.msg);
                    }
                })                 
            }else{
                      this.isdis=0;
            }
        },
        handleClose(done) {
			//done 用于关闭 Drawer
            if (this.loading) {
                return;
            }
            this.$confirm('确定要关闭表单吗？')
                .then(_ => {
                    // this.loading = true;
                    // this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        // setTimeout(() => {
                        //     this.loading = false;
                        // }, 400);
                    // }, 2000);
                    this.rules1 = 0;
                    this.rules2 = 0;
                    this.rules3 = 0;
                    this.form = {};
                    this.storeList=''
                    this.isdis=0;
                })
                .catch(_ => { });
        },     
        cancelForm() {
            this.loading = false;
			this.show_dialog = false;
            clearTimeout(this.timer);
            this.rules1 = 0;
            this.rules2 = 0;  
            this.rules3 = 0;   
            this.form = {};  
            this.storeList=''    
            this.isdis=0; 
        }
    }
};
</script>
<style lang="scss" scoped>
.el-form-item{
    margin-bottom: 0;
    width: 50%;
    .el-form-item__content{
        margin-bottom: 1px solid #D7D8DC; 
        .rules-span{
        display: none;
        }
    }
}
.rules-member1{
    position: absolute;
    // left: 430px;
    width: 190px;
    top: 28px;
    margin-left: 10px;
    color: #F56C6C;
}
.rules-member /deep/.el-input__inner{
    border: 1px solid #F56C6C;
}
.rules-member /deep/.el-textarea__inner{
    border: 1px solid #F56C6C;
}
#radio-item{
    width: 90%;
    margin-top: 10px;
}
#radio-item .el-radio-group{
    max-height: 200px;
    overflow: auto;
}
#radio-on /deep/.el-form-item__content{
    height: 0px;
}
.el-radio{
    margin: 10px;
}
.fuck .el-form-item__error{
        top: 50px;
        right: -80px;
}
.icon-span{
    position: absolute;
    right: -50px;
    color: #999999;
}
.radio-none{
    display: none;
}
.radio-block{
    display: block;
}
.start{
    color: red;
}
</style>